import React, { useEffect, useState } from 'react'
import { PageHeader } from '@ant-design/pro-layout'//需要安装@ant-design/pro-components，可以参考antd官网
import { Descriptions, message } from 'antd'
import { HeartOutlined, HeartFilled } from '@ant-design/icons';
import axios from 'axios'
import moment from 'moment'



function Detail(props) {
    // console.log(props.match.params.id);
    const [isheart, setIsheart] = useState(false)

    const [newsInfo, setnewsInfo] = useState(null)
    useEffect(() => {
        // console.log(props.match.params.id);
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then((res) => {

            setnewsInfo({
                ...res.data,
                view: res.data.view + 1
            });
            // console.log(res.data);
            return res.data
        }).then((res) => {
            axios.patch(`/news/${props.match.params.id}`, {
                "view": res.view + 1
            })
        })
    }, [props.match.params.id])

    const handleHeart = () => {
        if (isheart) {
            message.error("注意：不能重复点赞")
        } else {
            setIsheart(true);
            setnewsInfo({
                ...newsInfo,
                star: newsInfo.star + 1
            });

            axios.patch(`/news/${props.match.params.id}`, {
                "star": newsInfo.star + 1
            })
        }


    }


    return (
        <div>
            <PageHeader
                title={newsInfo?.title}
                subTitle={<div>
                    {newsInfo?.category.title}
                    {
                        isheart === true && <HeartFilled
                            style={{ color: "red" }}
                            onClick={() => handleHeart()}
                        />
                    }
                    {
                        isheart === false && <HeartOutlined
                            style={{ color: "red" }}
                            onClick={() => handleHeart()}
                        />
                    }
                </div>}
                onBack={() => window.history.back()}
            >

                {/**需要下载moment */}
                <Descriptions size='small' column={3}>
                    <Descriptions.Item label="创建者">{newsInfo?.author}</Descriptions.Item>
                    <Descriptions.Item label="发布时间">{
                        newsInfo?.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"
                    }</Descriptions.Item>
                    <Descriptions.Item label="区域">{newsInfo?.region}</Descriptions.Item>
                    <Descriptions.Item label="访问数量"><span style={{ color: "#99CC00" }}>{newsInfo?.view}</span></Descriptions.Item>
                    <Descriptions.Item label="点赞数量"><span style={{ color: "#99CC00" }}>{newsInfo?.star}</span></Descriptions.Item>
                    <Descriptions.Item label="评论数量"><span style={{ color: "#99CC00" }}>0</span></Descriptions.Item>
                </Descriptions>

            </PageHeader>
            <div
                dangerouslySetInnerHTML={{ __html: newsInfo?.content }}
                style={{
                    height: "100%",
                    padding: "15px 10px",
                    marginTop: "20px",
                    border: "1px solid #ccc",
                    borderRadius: "6px"
                }}
            >

            </div>
        </div>
    )
}

export default Detail